<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改个人信息</title>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./mycss.css">
</head>
<body>
    <div id="whole_wrapper">
        <div id="success_box">
            修改成功啦
            <img src="./img2/close1.png" id="close1">
        </div>
        <div id="fail_box">
            修改失败
            <img src="./img2/close1.png" id="close2">
        </div>
        <div id="black_wrapper">
            <div id="psw_changer">
                <div id="psw_changer_wrapper">
                    <div id="psw_title">密码修改</div>
                    <div id="close"><img src="./img2/close.png"></div>
                </div>
                <div class="psw_in_wrapper"><span class="dspan">原密码 </span>&nbsp;&nbsp;&nbsp;<input type="password" name="password_former" id="password_former" class="pinput"></div>
                <div class="psw_in_wrapper"><span class="dspan">新密码 </span>&nbsp;&nbsp;&nbsp;<input type="password" name="password_after" id="password_after" class="pinput"></div>
                <div class="psw_in_wrapper"><span class="dspan">确认密码 </span><input type="password" name="password_confirm" id="password_confirm" class="pinput"></div>
                <div id="psw_word">注：密码格式要求：密码长度为8-18位字符，必须同时包括字母和数字</div>
                <div id="sub_div"><button id="amend_psw">修改</button></div>
            </div>
        </div>
        <div class="top">
            <div class="welcome">欢迎使用本请假系统！</div>
            <div class="user">
                <div id="avatar">
                    <img src="./img/avatar.png" id="avatar_show">
                    <div id="user_event">注销</div>
                </div>
                <div id="user_name2"></div>
            </div>
        </div>
        <div class="main">
            <div id="director">
                <div class="logo">
                    <img src="./img/yundinglogo.png">
                </div>
                <div class="director_item">首页</div>
                <div class="director_item">请假</div>
                <div class="director_item">调研学</div>
                <div class="director_item">个人信息</div>
                <div class="director_item">关于我们</div>
            </div>
            <div class="banner">
                <div class="banner_item">
                    <div class="main_word">欢迎使用研学请假系统</div>
                    <div class="main_bottom">追光的人，终会光芒万丈！加油，云子们！</div>
                </div>
                <div class="banner_item">
                    <div class="wrapper"></div>
                </div>
                <div class="banner_item">
                    <div class="wrapper"></div>
                </div>
                <div class="banner_item">
                    <div class="wrapper" id="information">
                        <div class="info_top">
                            <a href="./personalInformation.html" id="modify">返回</a>
                        </div>
                        <form id="form" action="" method="post" enctype="multipart/form-data">
                            <div class="info_main">
                                <div class="info_name">
                                    <div class="image">
                                        <img src="./img/avatar.png" width="50px" height="50px" id="preview" style="position: absolute;left: 0;top: 0;border-radius: 50%;">
                                        <input type="file" accept="image/png,image/jpeg,image/gif" class="image" style="opacity: 0;z-index: 999;" id="avatar_change">
                                    </div>
                                    <div class="name" id="user_name1"></div>
                                </div>
                                <div class="info_infomation">
                                    <div class="gender">
                                        <img src="./img2/gender.png" alt="">
                                        <span>性别</span>
                                        <input type="text" id="gender1">
                                    </div>
                                    <div class="direction">
                                        <img src="./img2/directionpng.png" alt="">
                                        <span>方向</span>
                                        <input type="text" id="direction1" readonly>
                                    </div>
                                    <div class="term">
                                        <img src="./img2/term.png" alt="">
                                        <span>期数</span>
                                        <input type="text" id="term1" readonly>
                                    </div>
                                    <div class="home">
                                        <img src="./img2/home.png" alt="">
                                        <span>家乡</span>
                                        <input type="text" id="home1">
                                    </div>
                                    <div class="constellation">
                                        <img src="./img2/constellation.png" alt="">
                                        <span>星座</span>
                                        <input type="text" id="constellation1">
                                    </div>
                                    <div class="birthday">
                                        <img src="./img2/birthday.png" alt="">
                                        <span>生日</span>
                                        <input type="date" id="birthday1">
                                    </div>
                                </div>
                                <div class="info_contact">
                                    <div class="gender">
                                        <img src="./img2/user.png" alt="">
                                        <span>ID</span>
                                        <input type="text" id="id">
                                    </div>
                                    <div class="direction">
                                        <img src="./img2/pwd.png" alt="">
                                        <span>密码</span>
                                        <input type="password" id="psw" readonly>
                                        <img src="./img2/amend.png" id="amender">
                                    </div>
                                    <div class="term">
                                        <img src="./img2/phone.png" alt="">
                                        <span>手机号</span>
                                        <input type="tel" id="tel">
                                    </div>
                                    <div class="home">
                                        <img src="./img2/qq.png" alt="">
                                        <span>QQ</span>
                                        <input type="text" id="qq">
                                    </div>
                                    <div class="constellation">
                                        <img src="./img2/wechat.png" alt="">
                                        <span>微信</span>
                                        <input type="text" id="wx">
                                    </div>
    
                                    <div class="birthday">
                                        <img src="./img2/email.png" alt="">
                                        <span>邮箱</span>
                                        <input type="text" id="email">
                                    </div>
                                </div>
                                <div class="info_motto">
                                    <img src="./img2/motto.png" alt="" style="vertical-align:top;">
                                    <span style="vertical-align:top;">个性签名</span>
                                    <textarea name="" maxlength="500" id="info_motto1"></textarea>
                                </div>
                                <div class="info_picture">
                                    <div class="text">
                                        <img src="./img2/picture.png" alt="">
                                        <span>照片墙</span>
                                    </div>
                                    <div class="picture">
                                        <div class="p1">
                                            <img src="./img/default1.png" id="pic1" style="position: absolute;top: 0;left: 0;width: inherit;height: inherit;">
                                            <input type="file" id="pic1_change" accept="image/png,image/jpeg,image/gif" style="opacity: 0;z-index: 999;width: inherit;height: inherit;border: none;">
                                        </div>
                                        <div class="p1">
                                            <img src="./img/default2.png" id="pic2" style="position: absolute;top: 0;left: 0;width: inherit;height: inherit;">
                                            <input type="file" id="pic2_change" accept="image/png,image/jpeg,image/gif" style="opacity: 0;z-index: 999;width: inherit;height: inherit;border: none;">
                                        </div>
                                        <div class="p1">
                                            <div class="upload"><img src="./img2/upload.png">上传图片</div>
                                            <img src="./img/default3.png" id="pic3" style="position: absolute;top: 0;left: 0;width: inherit;height: inherit;">
                                            <input type="file" id="pic3_change" accept="image/png,image/jpeg,image/gif" style="opacity: 0;z-index: 999;width: inherit;height: inherit;border: none;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="submit" id="submit">保存</button>
                        </form>
                    </div>
                </div>
                <div class="banner_item">
                    <div class="wrapper"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.2/axios.js"></script>
    <script type="text/javascript" src="./myjs2.js"></script>
</body>
</html>